| тадам-ц! торжественное открытие ;) |
[[date|28.04.2020][time|1200]  ] |
это мой "подопытный" журнал
в отличие от этого журнала, в него я буду писать лишь при особой необходимости, а также для того, чтобы:
* протестировать те или иные сервисы и возможности...
~ ретранслировать rss в жжурнал
* вычислить степень "корявости" своих ручек :)
updt.01| отныне я также тут буду выкладывать всякие жж-мульки, чтоб свой жжурнал не засорять, а то товарищи жалуются :)
updt.02| жжурнал оптимизирован под firefox... остальные браузеры идут в сад!
updt.03|эта запись выступает в роли "почтового ящика". комменты скринятся
|
|
| Виджитизе! хихихи |
[[date|20.05.2007][time|1102] ] |
| [ |
mood |
| |
 hopeful |
] |
Итак, как я и обещал, рассказываю о еще одной маленькой полезности для блогов, которая не несет какой-либо нагрузки, кроме как облегчения доступа к вашим записям в той форме, котрая больше всего нравится вашему читателю.
На сей раз мы сделаем наш блог доступным для пользователей браузеров Opera 9+ в форме виджета.
Поможет нам в этом штатное средство Widgetize! Вся операция займет у нас 3 шага в общем случае и +1 специально расписанный для Livejournal.
Шаг первый: Выбор типа виджета.
 На странице http://widgets.opera.com/widgetize/ кликаем на кнопке Create a Widget! и выбираем из 4 представленных вариантов тот, который наилучшим образом соответствует нашим потребностям: для текстовых данных (Feed widget) можно выбрать между классическим вариантом и более продвинутым, а для картинок (Gallery viewer) - между обычным вариантом и вариантом в стиле стандартных скинов для Opera.
Тестовые виджеты поддерживают следующие типы блогов: My Opera, Blogspot, Livejournal, Xanga, MSN Spaces, Yahoo! 360°, Wordpress; но можно выбрать и любой другой текстовый фид.
Виждеты-галлереи - My Opera, Flickr, YouTube
После того, как Вы выбрали нужный вам тип, жмем на кнопку I want this type! и переходим к следующему шагу.
Шаг второй: Выбор внешнего вида виджета.
 Сначала нас попросят ввести заголовок, затем определить источник данных для вывода и затем определиться непосредственно с внешним видом самого виджета. Предлагается на выбор от 2 до 14 вариантов (в зависимости от типа, определенного нами на первом шаге).
После того, как Вы выбрали нужный вам вид оформления, жмем на кнопку Make my Widget! и переходим к следующему шагу.
Шаг третьий: Получение кода и дальнейшее его распространение.
 На этом этапе нам сразу же предлагают ознакомиться с тем, что мы слепили (для этого нажмите на кнопку Try this Widget! - сработает естественно только в Opera, если вы проделали все вышеописанные манипуляции в ином браузере, Вам любезно предложат его скачать и установить), а также предоставляют всевозможные коды для распространения вести о вашем виджете :)
Шаг четвертый: Правим оверрайды (?).
 Теперь вы можете просто вставить себе в юзеринфо кнопку, клик по которой позволит пользователю установить себе виджет с вашими записями или, если вы обладаете возможностью и некоторыми знаниями, добавить в код вашего жж запись, которая позволит Opera 9+ автоматически определять наличие виджета для вашей страницы, для чего необходимо разместить код, который дан в самом низу страницы в поле LASTN_HEAD
Например, для жжурнала ![[info]](http://l-stat.livejournal.com/img/userinfo.gif?v=91.7) undr_construct код такой:
Больше информации по настройке внешнего вида жжурналов см. в сообществе ![[info]](http://l-stat.livejournal.com/img/community.gif?v=91.7) ru_designhelp
|
|
| Альтернативный Lj-Cut |
[[date|07.02.2006][time|1844] ] |
| [ |
mood |
| |
 вопрос понятен, отвечаю |
] |
✁ в котором наличие скрытых строк выдает наличие полосы прокрутки (что, в свою очередь, облегчает просмотр)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent feugiat ultricies lacus. Nullam rutrum. Fusce blandit, massa eu fermentum vestibulum, metus nulla ornare turpis, at facilisis quam orci vitae dolor. Sed nonummy nisi id nunc. Nulla id est eu ipsum congue venenatis. In mollis. Pellentesque mauris. Maecenas pharetra faucibus nisi. Fusce ac lectus sit amet quam lobortis consequat. Nulla gravida nisi at nisl. Sed ut urna. Integer mattis rhoncus urna.
Donec vehicula justo sed est. Curabitur nibh nunc, pulvinar eu, molestie sed, convallis quis, purus. Proin sit amet felis et ligula lacinia vehicula. Phasellus ac leo. Nullam scelerisque. Donec sagittis sem. Pellentesque in sapien. Ut risus erat, viverra id, molestie in, porttitor a, pede. Vestibulum blandit odio eu arcu. Mauris fermentum turpis non pede. Vivamus at ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Vivamus cursus mauris. Etiam venenatis, odio quis lacinia scelerisque, augue turpis tincidunt lectus, sed consequat tortor diam vel purus. Pellentesque pede neque, porttitor ut, lacinia at, viverra at, leo. Sed porttitor, velit adipiscing sagittis convallis, tellus nibh fringilla quam, sed bibendum nisl orci non metus. Vivamus fermentum. Nam facilisis sodales ligula. Aenean sit amet augue. Cras urna massa, rhoncus vel, nonummy quis, ultrices a, urna. Curabitur auctor. Curabitur viverra. Integer mi. Suspendisse fringilla sapien a lacus. Sed eu pede nec dui scelerisque molestie. Cras mattis, velit a sodales porttitor, ligula nunc cursus diam, non vestibulum leo ipsum nec elit. Vivamus nonummy. Pellentesque aliquam feugiat pede. Nullam vitae mi. Integer porttitor sem ac sem. Aliquam erat volutpat.
вот код:
ну и сразу макрос(?) для semagic:
где [lj0] задает высоту блока, а [lj1] - собственно весь текст hint: (задаем высоту 1.5em и наш блок = строка)
по желанию данный кусок текста можно сделать более заметным
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent feugiat ultricies lacus. Nullam rutrum. Fusce blandit, massa eu fermentum vestibulum, metus nulla ornare turpis, at facilisis quam orci vitae dolor. Sed nonummy nisi id nunc. Nulla id est eu ipsum congue venenatis. In mollis. Pellentesque mauris. Maecenas pharetra faucibus nisi. Fusce ac lectus sit amet quam lobortis consequat. Nulla gravida nisi at nisl. Sed ut urna. Integer mattis rhoncus urna.
Donec vehicula justo sed est. Curabitur nibh nunc, pulvinar eu, molestie sed, convallis quis, purus. Proin sit amet felis et ligula lacinia vehicula. Phasellus ac leo. Nullam scelerisque. Donec sagittis sem. Pellentesque in sapien. Ut risus erat, viverra id, molestie in, porttitor a, pede. Vestibulum blandit odio eu arcu. Mauris fermentum turpis non pede. Vivamus at ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Vivamus cursus mauris. Etiam venenatis, odio quis lacinia scelerisque, augue turpis tincidunt lectus, sed consequat tortor diam vel purus. Pellentesque pede neque, porttitor ut, lacinia at, viverra at, leo. Sed porttitor, velit adipiscing sagittis convallis, tellus nibh fringilla quam, sed bibendum nisl orci non metus. Vivamus fermentum. Nam facilisis sodales ligula. Aenean sit amet augue. Cras urna massa, rhoncus vel, nonummy quis, ultrices a, urna. Curabitur auctor. Curabitur viverra. Integer mi. Suspendisse fringilla sapien a lacus. Sed eu pede nec dui scelerisque molestie. Cras mattis, velit a sodales porttitor, ligula nunc cursus diam, non vestibulum leo ipsum nec elit. Vivamus nonummy. Pellentesque aliquam feugiat pede. Nullam vitae mi. Integer porttitor sem ac sem. Aliquam erat volutpat.
или вот так вот хитро скрыть
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent feugiat ultricies lacus. Nullam rutrum. Fusce blandit, massa eu fermentum vestibulum, metus nulla ornare turpis, at facilisis quam orci vitae dolor. Sed nonummy nisi id nunc. Nulla id est eu ipsum congue venenatis. In mollis. Pellentesque mauris. Maecenas pharetra faucibus nisi. Fusce ac lectus sit amet quam lobortis consequat. Nulla gravida nisi at nisl. Sed ut urna. Integer mattis rhoncus urna. Donec vehicula justo sed est. Curabitur nibh nunc, pulvinar eu, molestie sed, convallis quis, purus. Proin sit amet felis et ligula lacinia vehicula. Phasellus ac leo. Nullam scelerisque. Donec sagittis sem. Pellentesque in sapien. Ut risus erat, viverra id, molestie in, porttitor a, pede. Vestibulum blandit odio eu arcu. Mauris fermentum turpis non pede. Vivamus at ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus cursus mauris. Etiam venenatis, odio quis lacinia scelerisque, augue turpis tincidunt lectus, sed consequat tortor diam vel purus. Pellentesque pede neque, porttitor ut, lacinia at, viverra at, leo. Sed porttitor, velit adipiscing sagittis convallis, tellus nibh fringilla quam, sed bibendum nisl orci non metus. Vivamus fermentum. Nam facilisis sodales ligula. Aenean sit amet augue. Cras urna massa, rhoncus vel, nonummy quis, ultrices a, urna. Curabitur auctor. Curabitur viverra. Integer mi. Suspendisse fringilla sapien a lacus. Sed eu pede nec dui scelerisque molestie. Cras mattis, velit a sodales porttitor, ligula nunc cursus diam, non vestibulum leo ipsum nec elit. Vivamus nonummy. Pellentesque aliquam feugiat pede. Nullam vitae mi. Integer porttitor sem ac sem. Aliquam erat volutpat.
фантазируйте!
updt.1  lj://kidd79/LJ-Cut Pseudo-hack Using CSS - много и подробно описана другая технология вставки реального LJ-Cut, который замаскирован
|
|
| Via Mobile |
[[date|28.08.2005][time|1801] ] |
Я иногда пишу в жжурнал при помощи мобильного телефона. Иногда это удобнее, проще и - самое, наверное, главное - быстрее и дешевле, чем искать компьютер, выходить в интернет и сообщать какую-то новость. Конечно же, мне хочется как-то выделять эти сообщения, для того чтобы читатели понимали, что данное сообщение "с пылу, с жару"... Можно, конечно, приписывать в конце, что это сообщение выполнено при помощи того-то и того-то, но мне хотелось большей наглядности...
Раньше я пользовался программой TinyLJ, которая позволяла маркировать "мобильные" записи при помощи маленькой хитрости: достаточно было указать расположение подписи сообщения "at bottom", а вместо подписи разместить обычный html-код картинки.
Например: <IMG title="via mobile" src="http://ljplus.ru/img2/rubzn/_mobile.gif" align=left> align и title можно было не указывать...
Значок появлялся, но что он обозначает было не совсем понятно... Тогда я попытался указать в title "via TinyLJ", однако эта программа имеет особенность: она произвольно превращает текст "TinyLJ", встречающийся в подписи, в гиперссылку на ее сайт... Соответственно мой код с title="via TinyLJ" превращался в ..."via <a href="http://levong.ok.ru/default.html">TinyLJ</a>"... Короче - портился... Поэтому мне пришлось отказаться от прямого указания программы и перенести ее упоминание в мою юзеринфо... Немного корявый способ, да?
Позднее я всё-таки установил себе LJ2ME, которая обладает рядом преимуществ, по сравнению с первой...
Однако в ней текст подписи(?) можно размещать только в строке заголовка... А туда, как мы знаем, картинки вставлять не позволительно... Но и из этой ситуации был найден выход, причем мне он нравится даже больше, чем картинка в конце сообщения.
Достаточно добавить в поле перекрывающих кодов:
LASTN_HEAD<=
<style type="text/css">
.caption a[href="http://www.xfyre.com/sw/lj2me.html"]{
width: 0;
height: 0;
padding-left: 10px;
background: url(http://ljplus.ru/img2/rubzn/_mobile.gif) no-repeat left top;
}
</style>
<=LASTN_HEAD
и вы сможете лицезреть нужный вам значок, причем именно там, где и располагаются подобные значки специальных записей.
|
|
| Полупрозрачность фона |
[[date|24.07.2005][time|1934] ] |
Объясняю на примере стиля Generator
§ Вариант для альтернативных браузеров (Firefox, Opera)
Предварительно создаем полупрозрачный png-файл и куда-нть его загружаем (допустим, на lj+.ru)...
Далее, пишем в GLOBAL_HEAD
.entrybox {
background-image: url(http://ваша-полупрозрачная-картинка.png);
}
Вот и все! Ловкость рук и никакого мошенничества!©
§ Вариант для IE
IE не понимает полупрозрачности в png-файлах (если не прилагать к тому особенных усилий), посему самый простой способ - заменить png на gif, в котором будут чередоваться прозрачные и непрозрачные пиксели.
Можно еще шаманить с фильтрами:
"хитрый" фильтр filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='myimage.png', sizingMethod='scale') на первый взгляд делает то, что нужно, но... пропадает выделяемость текста и, что совсем плохо, кликабельность ссылок внутри контейнера, который в этом случае начинает вести себя как сплошная картинка.
|
|
| CSS Hacks |
[[date|01.01.2005][time|1200] ] |
При помощи следующих методов можно избегать ряда проблем, которые возникают из-за т.н. "войны браузеров"
сравнение веб-браузеров
§ Использование селектора дочерних элементов:
CSS 2.1 Specification: Селектор дочерних элементов совпадает, если элемент является дочерним относительно другого элемента. Селектор дочерних элементов состоит из двух или более селекторов, разделенных символом " >".
Если без заморочек: селектор html>body обозначает "тег body, который является дочерним по отношению к тегу html." Самое главное, чем нам это может быть интересно - Mozilla и прочие браузеры понимают этот селектор, а вот Internet Explorer - не понимает, посему игнорирует. Эта особенность и дает возможность писать куски кода для разных браузеров внутри одного документа.
Для того, чтобы применить данный способ необходимо просто продублировать интересующий нас кусок кода и перед вторым вариантом добавить html>body. Первый кусок будет интерпретироваться Internet Explorer, а второй - всеми остальными браузерами.
Например, данный код показывает, как сделать текст внутри тега font красным в Internet Explorer, в то время как в других браузерах он будет синим:
font{
color: red;
}
html>body font{
color: blue;
}
Естественно, что область применения данного способа не ограничивается раскрашиванием текста в разные цвета. Таким образом можно бороться с позиционированием элементов, ведь нередко случается, что в одном браузере все смотрится отлично, а в другом появляются непонятные отступы. Используя данный трюк можно установить корректное отображение страницы в IE, а затем при помощи селектора html>body подкорректировать отображение страницы в иных браузерах, не нарушая внешнего вида в IE.
§ Использование правила !important:
Если вы определили какое-либо значение (допустим, размер шрифта) в CSS дважды, браузер будет учитывать последнее. Чтобы такого не случалось можно в конец строки приписывать !important - в таком случае именно данное значение будет принято во внимание, даже если позже оно будет определено еще раз иначе. Однако, как и в случае с селектором дочерних элементов, Internet Explorer не воспринимает !important. Таким образом, можно писать две строки - одну с !important на конце, а затем другую - без. Первая строка будет использоваться Mozilla и другими браузерами, т.к. они воспринимают правила !important, а вторая - IE, потому что он данные правила не воспринимает и берет последнее указанное значение.
Как и в предыдущем примере, данный код показывает, как сделать текст внутри тега font красным в Internet Explorer, в то время как в других браузерах он будет синим:
font{
color: blue!important;
color: red;
}
Преимуществом данного метода перед первым является компактность кода. Однако, некоторые находят его сомнительным...
§ Использование * html:
IE - особый продукт, что уж тут говорить... CSS селекторы он интерпретирует иначе, чем все остальные браузеры.
Например селекторы вида: * html , * * body , * html body IE воспринимает словно это html , * body , html body ...
Остальные браузеры обрабатывают данные селекторы по правилам. Ведь в корректном (Х)HTML документе html всегда является корневым элементом,а body всегда является по отношению к нему (дочерним) потомком первого поколения, но никак не потомком второго (или третьего) поколения. То есть эти селекторы не могут сопоставляться никакому элементу. Однако, с точки зрения синтаксиса они корректны.
Таким образом, если исключительно IE не воспринимает данное правило, то его можно использовать для обозначения кода, которое будет понимать только IE.
И опять, данный код показывает, как сделать текст внутри тега font красным в Internet Explorer, в то время как в других браузерах он будет синим:
font{
color: blue;
}
* html font {
color: red;
}
Таким образом можно не дублировать целые куски кода, как в случае с селектором дочерних элементов, а указывать только IE-значения.
§ Bonus:
Will the browser apply the rule(s)?
|
|
| аки электронное табло |
[[date|01.01.2005][time|1200] ] |
| [ |
mood |
| |
 crazy |
] |
немного дополняя пост о преобразованиях даты и времени, хочу написать, как заставить мигать двоеточие-разделитель при отображении времени (если у вас, конечно в качестве разделителя установлено двоеточие)
простой вариант (для firefox и opera)
вы, должно быть, знаете или хотя бы слышали о тэге <blink></blink>, который заставляет текст помещенный в него мигать...
теперь находим в коде двоеточие и окружаем его этим тэгом... в принципе, вот и все объяснение :)
пример: если вы хотите, чтобы ваша дата выглядела так [25.05.05 | 1650], пишете в поле перекрывающих кодов:
LASTN_DATE_FORMAT=>%%dd%%. %%mm%%. %%yy%%| %%24hh%%<blink>:</blink>%%min%%
вариант универсальный (работает даже в ie)
опять же ничего замудренного и архисложного: вставляем вместо двоеточия картинку, на которой изображено это самое мигающее двоеточие :) например вот эту  <img src="http://www.ljplus.ru/img2/rubzn/time.gif" width=4 height=11>
пример: если вы хотите, чтобы ваша дата выглядела так [25.05.05 | 1650], пишете в поле перекрывающих кодов:
LASTN_DATE_FORMAT=>%%dd%%. %%mm%%. %%yy%%| %%24hh%%<img src="http://www.ljplus.ru/img2/rubzn/time.gif" width=4 height=11>%%min%%
|
|
| [subj.|S1, tags, utx] |
[[date|01.01.2004][time|1200] ] |
совсем недавно в жж появилась возможность сопровождать свои записи т.н. tags ("тэги", или "ключевые слова" - кому как удобнее) lj://ru_lj_utils/17299; кто-то порадовался, кто-то усомнился в целесообразности такого новшества, а кто-то сказал, что у них есть utx, а "такого счастья" им не надо, т.к. в системе стилей s1 они не работают...
сейчас мы это будем исправлять (сильно, конечно, сказано...) точнее,
сейчас мы будем простыми методами при помощи utx создавать видимость использования lj-tags. естественно, что все эти пируэты выполняются при помощи semagic и макросов (lj://rubzn/76142).
за основу берем стандартный макрос для оформления тега utx, немного его видоизменяем для пущей наглядности
и используем далее по своему усмотрению...
примером может служить сама эта запись.
минусом использования этого метода, по сравнению с обычными lj-tags, остается только то, что для маркирования записи несколькими тегами - каждый нужно оформлять отдельно.
updt. развиваем идею (для s2)
прочитав lj://gorynych/224840, я еще немного переделал макрос (чтоб в s2 работал на полную)
теперь при щелчке на квадратике будет открываться каталог utx, а при щелчке на теге - отфильтрованный по этому тегу жжурнал
updt.lj://sciuro/82382 Как сортировать тэги под S1
|
|
| Замена значков защищенных записей |
[[date|01.01.2004][time|1200] ] |
| [ |
mood |
| |
 creative |
] |
Сейчас мы научимся изменять стандартные значки  и  , которыми отмечены защищенные записи.
ВНИМАНИЕ: данный оверрайд не работает в Internet Explorer - пользуйтесь альтернативными браузерами (Firefox, Netscape, или Opera). В IE значки останутся прежними.</p> Подготовка:
В любой пригодной для создания изображений программе создайте 2 значка размером 16x16 пикселей - соответственно, один для защищенных записей, второй - для личных. Затем загрузите их в сеть (например, на lj+.ru) Коды:
В GLOBAL_HEAD или LASTN_HEAD пишем:
.caption img[src="http://stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 0 16px 16px 0;
background: url(http://yourdomain.com/lock.gif);
}
.caption img[src="http://stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 0 16px 16px 0;
background: url(http://yourdomain.com/eye.gif);
} Редактирование:
Замените выделенные жирным адреса на адреса ваших картинок.
|
|
| navigation |
| [ |
viewing |
| |
most recent entries |
] |
|
|
|
|
]
необходимо код: